<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
  <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css" />
  <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
  <title>学术</title>
  <style>
		html, body {width: 100%;min-height: 100%;background: #f0f0f0;}
		.h20 {height: 0.5rem;}

    #slider1 {
		background: #fff;
		width: 100%;
    margin-top: 65px;
		}
		#slider1 .swiper-slide {
			-webkit-transform: scale(0.8);
			transform: scale(0.8);
			transition: all 0.4s ease;
			-webkit-transition: all 0.4s ease;
			height: 10rem;
			width: 100%;
		}
		#slider1 .swiper-slide-active {
			width: 100%;
			top: 0px;
			-webkit-transform: scale(1);
			transform: scale(1);
		}
    .index_grid.aui-grid .grid-img {
      width: 37.5%;
      margin: auto;
    }
.aui-row-padded {
  width: 100%;
}
.index_grid {
  padding: 10px 0;
}
    .tjtz .aui-list-item-media,
    .jkzx .aui-list-item-media {
      width: 6.5rem;
    }
    .tjtz .aui-list-item .aui-list-item-title,
    .jkzx .aui-list-item .aui-list-item-title {
      color: #333;
      line-height: 1.2rem;
      font-size: 0.8rem;
    }
    .tjtz .aui-list-item .aui-info-item,
    .jkzx .aui-list-item .aui-info-item {
      color: #999;
      font-size: 0.7rem;
    }
    .tjtz .aui-media-list .aui-list-item-inner,
    .jkzx .aui-media-list .aui-list-item-inner {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-orient: vertical;
      box-orient: vertical;
      -webkit-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      -webkit-box-align: start;
      -webkit-align-items: flex-start;
      align-items: flex-start;
    }

    .jkzx .aui-list-item.last-item .aui-list-item-title {
			color: #666;
			font-size: 0.7rem
		}
    .jkzx .last-item_video {
			position: relative;
			padding: 0;
		}
		.jkzx .last-item_video .mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background: rgba(0, 0, 0, 0.1);
		}
		.jkzx .last-item_video .mask_mid {
			width: 4rem;
			height: 4rem;
			padding: 1rem;
			position: absolute;
			left:0;
			right:0;
			top: 0;
			bottom: 0;
			margin: auto;
			border-radius: 50%;
			background: rgba(0,0,0,0.3);
			text-align: center;
		}
		.jkzx .last-item_video .mask_mid img {
			height: 100%;
			width: auto;
			margin-left: auto;
			margin-right: 0;
		}
		.jkzx .last-item_video .mask_bot {
			color: #fff;
			position: absolute;
			bottom: 0;
			width: 100%;
			padding: 1rem;
		}
		.jkzx .last-item_video .mask_left {
			float: left;
			color: #fff;
			font-size: 0.7rem;
		}
		.jkzx .last-item_video .mask_left img {
			width: 0.7rem;
			display: inline-block;
			vertical-align: middle;
			margin-top: -0.25rem;
			margin-right: 0.25rem;
		}
		.jkzx .last-item_video .mask_right {
			float: right;
			color: #fff;
			font-size: 0.7rem;
		}
    .index_grid .aui-col-xs-4 {
      margin: 0 8.3333333333%;
    }

    #header_top {
      padding-top: 25px;
      background: #2997e4;
      position: fixed;
      top:0;
      width: 100%;
    }
    /*body {
      padding-top: 65px;
    }*/
    .itemIco {
      width: 100%;
      height: 4rem;
    }
	</style>
</head>
<body>
  <header id="header_top" class="aui-bar aui-bar-nav" >

    <a class="aui-pull-left"  onclick="goback()">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title" id="title">
    健康
  </div>
      <a class="aui-pull-right" onclick="openRz('医生认证')">
          医生认证
      </a>
  </header>
  <section class="aui-refresh-content">
  <div id="app" v-cloak>

<!-- 轮播图 -->
<div class="swiper-container"  id="slider1">

  <div class="swiper-wrapper" v-if="banner.length > 0">
    <div class="swiper-slide" v-for="item in banner" v-if="item && item != ''" :style="'background: url('+item+') center/cover no-repeat'"></div>
  </div>


  <div class="swiper-wrapper" v-else>
    <div class="swiper-slide" style="background: url(../../image/banner1.jpg)"></div>
  </div>
</div>
<!-- 轮播图 end -->
<!-- 1. 头部swipe -->

<section class="aui-grid index_grid">
  <div class="aui-row">
    <div class="aui-col-xs-4" onclick="openPage('jk_0', '心理检查')">
      <div class="grid-img">
        <img src="../../image/firstpage/xljc@3x.png" alt="">
      </div>
      <div class="aui-grid-label">心理检查</div>
    </div>
    <div class="aui-col-xs-4" onclick="openPage('jk_1', '心理辅导')">
      <div class="grid-img">
        <img src="../../image/firstpage/xlfd@3x.png" alt="">
      </div>
      <div class="aui-grid-label">心理辅导</div>
    </div>
  </div>
</section>
<div class="h20"></div>
<div class="section03 jkzx" tapmode="presshover">
  <div class="aui-content">
    <div class="font-title">健康咨询</div>
    <div class="aui-content">
      <ul class="aui-list aui-media-list">
        <li class="aui-list-item" @click="openJkzx('健康咨询', item.newsId)" v-for="item in newsList">
          <div class="aui-media-list-item-inner">
            <div class="aui-list-item-media">
              <div v-if="item.pics && item.pics != ''" class="itemIco" :style="'background: url('+ item.pics +') center/cover no-repeat'"></div>
              <div v-else class="itemIco" style="background: url(../../image/firstpage/t1@3x.png) center/cover no-repeat"></div>
            </div>
            <div class="aui-list-item-inner">
              <div class="aui-list-item-text">
                <div class="aui-list-item-title">{{item.title}}</div>
              </div>
              <div class="aui-info aui-margin-t-5" style="padding:0">
                <div class="aui-info-item">{{item.createTime}}</div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
</div>
</section>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script src="../../script/aui-pull-refresh.js"></script>
<script>
apiready = function() {

  var app = new Vue({
    el: '#app',
    data: {
      banner: [],
      newsList: [],
      mySwiper: null
    },
    created: function() {
      var $_this = this;
      api.ajax({
        url: window.Url.getImage,
        timeout: 300,

      }, function(ret, err) {
          if (ret) {
              console.log(JSON.stringify(ret) );
              $_this.banner = ret.data.images
              $_this.$nextTick(function() {
                $_this.mySwiper = new Swiper('#slider1',{
                  autoplay: 5000,
                  loop: true,
                })
              })
          } else {
              api.alert({ msg: JSON.stringify(err) });
          }
      })
      api.ajax({
        url: window.Url.getArticleList + '5/1',
        timeout: 300,

      }, function(ret, err) {
          if (ret) {
              // api.alert({ msg: JSON.stringify(ret) });
              if (ret.data == null) return
              $_this.newsList = ret.data.newsList
          } else {
              api.alert({ msg: JSON.stringify(err) });
          }
      })

      var pullRefresh = new auiPullToRefresh({
          container: document.querySelector('.aui-refresh-content'),
          triggerDistance: 100
      },function(ret){
          if(ret.status=="success"){
            api.ajax({
              url: window.Url.home_banner,
              timeout: 300,

            }, function(ret, err) {
                if (ret) {
                    // api.alert({ msg: JSON.stringify(ret) });
                    $_this.banner = ret.data

                    $_this.$nextTick(function() {
                      $_this.mySwiper.reLoop()
                    $_this.mySwiper.updateSlidesSize()
                    $_this.mySwiper.updatePagination()
                    $_this.mySwiper.slideTo(1, 0, false)
                    })
                } else {
                    api.alert({ msg: JSON.stringify(err) });
                }
            })
            api.ajax({
              url: window.Url.getArticleList + '5/1',
              timeout: 300,

            }, function(ret, err) {
                if (ret) {
                    // api.alert({ msg: JSON.stringify(ret) });
                    setTimeout(function() {
                      if (ret.data == null) {
                        pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                        return;
                      }
                      $_this.newsList = ret.data.newsList
                        pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                    },500)
                } else {
                    api.alert({ msg: JSON.stringify(err) });
                }
            })

          }
      })
    },
    methods: {
      openJkzx: function (title, id) {
        api.openWin({
          name: 'index_detail_xc',
          url: './index_detail_xc.html',
          pageParam: {
            name: 'index_detail_xc',
            title: title,
            id: id
          },
          bounces: false,
          delay: 200
        });
      }
    }
  })
}
    function goback () {
      api.closeWin({name:api.pageParam.name});
    }
  function openPage(type, title) {
    api.openWin({
      name: 'index_' + type,
      pageParam: {
        name: 'index_' + type,
        title: title
      },
      url: './first_header.html',
      delay: 200,
      bounces: false
    });
  }

  function openTjtz(title) {
    api.openWin({
      name: 'index_detail_tjtz',
      url: './first_header.html',
      pageParam: {
        name: 'index_detail_tjtz',
        title: title
      },
      bounces: false,
      delay: 200
    });
  }




  function openRz(title) {
    api.openWin({
      name: 'index_jk_rz',
      url: './index_jk_rz.html',
      pageParam: {
        name: 'index_jk_rz',
        title: title
      },
      bounces: false,
      delay: 200
    });
  }

  window.onload = function() {
    var mySwiper = new Swiper('#slider1',{
      autoplay: 5000,
      loop: true,
      slidesPerView : 1.2,
      centeredSlides : true,
    })
  }
</script>
</body>
</html>
